<template>
  <div v-loading="loading" class="parentStyle">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="dataForm">
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('名称')" prop="name">
            <el-input v-model="form.name" :placeholder="$t('名称')" disabled show-word-limit maxlength="500" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('邮箱')" prop="email">
            <el-input v-model="form.email" :placeholder="$t('邮箱')" disabled show-word-limit maxlength="500" />
          </el-form-item>
        </el-col>
        <div style="margin-top:15px;">
          <div class="area-header">
            <span class="area-header-title">{{ $t('周期') }}</span>
          </div>
          <el-table :data="form.queryList" border class="nowrapTable formTable">
            <el-table-column :label="$t('年份')" align="center">
              <template slot="header" slot-scope="{}">
                <i style="color: #ff4949;margin-right: 4px;">*</i>
                <span>{{ $t('年份') }}</span>
                <el-tooltip :content="$t('运营数据保存后, 当前页面年份周期才会更新')">
                  <i class="el-icon-question" />
                </el-tooltip>
              </template>
              <template slot-scope="scope">
                <el-form-item :prop="'queryList.' + scope.$index + '.year'" :rules="queryListRules.year">
                  <el-select v-model="scope.row.year" @change="checkDisabled">
                    <el-option
                      v-for="(item) in pageForecastYear"
                      :key="item"
                      :label="parseInt(pageStartYear) + (item - 1)"
                      :value="parseInt(pageStartYear) + (item - 1)"
                      :disabled="checkDisabledArr.includes(parseInt(pageStartYear) + (item - 1))"
                    />
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column v-if="pageCycle === 'month'" :label="$t('周期')" align="center">
              <template slot="header" slot-scope="{}">
                <i style="color: #ff4949;margin-right: 4px;">*</i>
                <span>{{ $t('周期') }}</span>
              </template>
              <template slot-scope="scope">
                <el-form-item :prop="'queryList.' + scope.$index + '.cycle'" :rules="queryListRules.cycle">
                  <el-select v-model="scope.row.cycle" multiple>
                    <el-option
                      v-for="(item) in 12"
                      :key="item"
                      :label="item"
                      :value="item"
                    />
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column v-if="pageCycle === 'quarter'" :label="$t('周期')" align="center">
              <template slot="header" slot-scope="{}">
                <i style="color: #ff4949;margin-right: 4px;">*</i>
                <span>{{ $t('周期') }}</span>
              </template>
              <template slot-scope="scope">
                <el-form-item :prop="'queryList.' + scope.$index + '.cycle'" :rules="queryListRules.cycle">
                  <el-select v-model="scope.row.cycle" multiple>
                    <el-option :label="'Q1'" value="Q1" />
                    <el-option :label="'Q2'" value="Q2" />
                    <el-option :label="'Q3'" value="Q3" />
                    <el-option :label="'Q4'" value="Q4" />
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column fixed="right" :label="$t('操作')" align="center" width="70">
              <template slot-scope="scope">
                <el-button type="text" size="mini" class="el-icon-delete" @click="delRow(scope.$index)">{{ $t('删除') }}</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="tol" style="display: -webkit-box;">
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="addRow">{{ $t("添加") }}</el-button>
          </div>
        </div>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: right;width: 100%">
      <el-button @click="cancel">{{ $t("取消") }}</el-button>
      <el-button type="primary" :disabled="form.queryList.length <= 0" @click="submitForm">{{ $t("发送") }}</el-button>
    </div>
  </div>
</template>

<script>
import { specifiedFillingSave } from '@/api/deal/indicator/data/dealIndicatorDataMain'

export default {
  components: {},
  data() {
    return {
      // 遮盖层
      loading: false,
      form: {
        queryList: []
      },
      rules: {},
      parentData: {},
      queryListRules: {
        year: [{ required: true, message: this.$t('必填信息'),	trigger: ['change'] }],
        cycle: [{ required: true, message: this.$t('必填信息'),	trigger: ['change'] }]
      },
      pageForecastYear: undefined,
      pageStartYear: undefined,
      pageCycle: undefined,
      checkDisabledArr: []
    }
  },
  computed: {},
  created() {
  },
  methods: {
    init(data) {
      console.log(data)
      this.parentData = data
      this.form = data.dealIndicatorEmail
      this.form.queryList = []
      this.$forceUpdate()
    },
    addRow() {
      const row = { year: undefined, cycle: [] }
      if (!(this.form.queryList instanceof Array)) {
        this.$set(this.form, 'queryList', [])
      }
      this.$nextTick(() => {
        this.form.queryList.push(row)
        this.$forceUpdate()
      })
    },
    delRow(index) {
      this.form.queryList.splice(index, 1)
      this.checkDisabled()
    },
    cancel() {
      this.loading = false
      this.$parent.$parent.specifiedFillingOpen = false
    },
    checkDisabled() {
      this.checkDisabledArr = []
      this.form.queryList && this.form.queryList.forEach(item => {
        if (item.year !== undefined) {
          this.checkDisabledArr.push(item.year)
        }
      })
      this.$forceUpdate()
    },
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.loading = true
          // 整理数据. 将数据存入缓存
          var yearArr = []
          if (this.pageCycle === 'year') {
            this.form.queryList.forEach(item => {
              yearArr.push(item.year)
            })
          } else {
            this.form.queryList.forEach(item => {
              item.cycle.forEach(sub => {
                yearArr.push(item.year + '-' + (parseInt(sub) <= 9 ? ('0' + sub) : sub))
              })
            })
          }
          const data = {
            id: this.parentData.id,
            dealId: this.$route.query.id,
            indicatorCache: {
              indicatorId: this.parentData.id,
              name: this.form.name,
              email: this.form.email,
              role: this.parentData.dealIndicatorEmail.role,
              userId: this.parentData.dealIndicatorEmail.userId,
              editList: yearArr
            }
          }
          specifiedFillingSave(data).then(response => {
            this.msgSuccess(this.$t(response.msg))
            this.cancel()
          })
        }
      })
    }
  }
}
</script>

<style scoped>
</style>
